<template>
    <el-container class="index-container">
        <el-header>
            <div>
                <img src="../assets/img/kc.png">
                <span>课程分析系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>

        <el-container>
            <el-aside width="200px">
                <el-menu router :default-openeds="['1', '2', '3']" background-color="#333744" text-color="#ffffff" active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-user-solid"></i>管理员管理</template>
                        <el-menu-item :index="$router.options.routes[0].children[0].path"> 管理员列表</el-menu-item>
                        <el-menu-item :index="$router.options.routes[0].children[1].path">修改密码</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-user"></i>员工管理</template>
                        <el-menu-item :index="$router.options.routes[0].children[3].path">员工列表</el-menu-item>
                        <el-menu-item :index="$router.options.routes[0].children[4].path">添加员工</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-s-data"></i>报表管理</template>
                        <el-menu-item :index="$router.options.routes[0].children[6].path">柱状图报表</el-menu-item>
                        <el-menu-item :index="$router.options.routes[0].children[7].path">环状图报表</el-menu-item>
                        <el-menu-item :index="$router.options.routes[0].children[8].path">饼图报表</el-menu-item>
                        <el-menu-item :index="$router.options.routes[0].children[9].path">扎线图报表</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "index",
        methods: {
            logout(){
                window.sessionStorage.clear()
                this.$router.push('/login')
            }
        }
    }
</script>

<style lang="less" scoped>
    .index-container {
        height: 650px;
    }
    .el-header {
        background-color: #373D41;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #fff;
        font-size: 20px;
        >div {
            display: flex;
            align-items: center;
            span {
                margin-left: 15px;
            }
        }
    }
    .el-aside {
        background-color: #333744;
    }
    .el-main {
        background-color: #EAEDF1;
    }

</style>